/**
 * Created by Administrator on 2017/9/23.
 */

$(function () {


    //若没有登录，则获得cookie值
    var obj=JSON.parse($.cookie("myLogin"));
    if(obj){
        $("#header .wrapper-l").children().eq(0).html("欢迎"+obj.utel+"登录");
        $("#header .wrapper-l").children().eq(1).html("<a href='#'>退出</a>");
    };



    //点击加减,确定购买数量;
    var num=1
    $("#mirror .add").on("click",function () {
        if(num<10){
            num++;
            $("#mirror .num").html(num);
        }
    });
    $("#mirror .reduce").on("click",function () {
        if(num>1){
            num--;
            $("#mirror .num").html(num);
        }
    });


    //移入下拉
    var headerLi=$("#header").find(".header-ul>li");
    headerLi.on("mouseenter",function () {
        $(this).find("ul").stop().slideDown()
    })
    headerLi.on("mouseleave",function () {
        $(this).find("ul").stop().slideUp()
    })


    //放大镜效果
    $("#smallImg").on("mousemove",function (evt) {
        $("#smallArea").show();
        $("#bigArea").show();
        //计算小区域的位置
        var smallWidth=($("#smallImg").width()/$("#bigImg").width())*$("#bigArea").width();
        var smallHeight=($("#smallImg").height()/$("#bigImg").height())*$("#bigArea").height();
        $("#smallArea").width(smallWidth);
        $("#smallArea").height(smallHeight);
        //首先获得小图片的位置
        var smallX=$("#smallImg").offset().left;
        var smallY=$("#smallImg").offset().top;
        //放大系数
        var scale=$("#bigImg").width()/$("#smallImg").width();
        //计算小区域的left和top
        var disX=evt.clientX-smallX-$("#smallArea").width()/2;
        var disY=evt.clientY-smallY-$("#smallArea").height()/2;


        //判断边界
        if(disX<=0){
            disX=0
        }
        if(disY<=0){
            disY=0
        }
        if(disY>=$("#smallImg").height()-$("#smallArea").height()){
            disY=$("#smallImg").height()-$("#smallArea").height()
        }
        if(disX>=$("#smallImg").width()-$("#smallArea").width()){
            disX=$("#smallImg").width()-$("#smallArea").width();
        }
        $("#smallArea").css({left:disX+"px",top:disY+"px"})
        //改变大图的位置
        var bigX=-scale*disX;
        var bigY=-scale*disY;
        $("#bigImg").css({left:bigX,top:bigY})
    });
    $("#smallImg").on("mouseleave",function () {
        $("#smallArea").hide();
        $("#bigArea").hide();
    });

    //声明一个数组
    var Arr=[];
    $.ajax({
        url:"../json/detail.json",
        type:"get",
        async:false,
        success:function (res) {
            //放大镜中图
            for (var i = 0; i < 1; i++) {
                //创建a标签
                var  A=$("<a></a>")
                //创建图片
                var Img=$("<img>");
                Img.attr("src",res[i].mirror1)
                A.append(Img);
                $("#smallImg").append(A);
                //创建h2,h5,price,give
                var H2=$("<h2></h2>");
                H2.html(res[i].h2);
                var H5=$("<h5></h5>")
                H5.html(res[i].h5);
                $("#mirror .title").append(H2)
                $("#mirror .title").append(H5)
                var Span=$("<span></span>");
                Span.html(res[i].price);
                var Sub=$("<sub></sub>");
                Sub.html(res[i].give);
                $("#mirror .price").append(Span);
                $("#mirror .price").append(Sub);
            };

            //放大镜小图
            for (var i = 0; i < 5; i++) {
                //创建a标签
                var  A=$("<a></a>");
                //创建图片
                var Img=$("<img>");
                Img.attr("src",res[i].mirror1)
                A.append(Img);
                //创建li标签
                var Li=$("<li></li>");
                Li.append(A);
                Li.on("mouseenter",function () {
                    var href=$(this).find("img").attr("src");
                    $("#smallImg").find("img").attr("src",href);
                    $("#bigImg").attr("src",href);
                })
                $("#mirror .least").append(Li);
            };
            //获得图片的路径
            var str=window.location.search;
            str=decodeURIComponent(str);
            if(str.indexOf("?")!=-1&&str.indexOf("=")!=-1){
                var arr=str.split("?")[1].split("=");
                var self=res;
                var flag=true;
                $.each(res,function (index,obj) {
                    if(arr[1]==obj.mirror1&&flag==true){
                        flag=false;
                        $("#mirror .least").html("");
                        $("#smallImg").find("img").attr("src",self[index].mirror1);
                        $("#mirror .title").find("h2").html(self[index].h2);
                        $("#mirror .title").find("h5").html(self[index].h5);
                        $("#mirror .price").find("span").html(self[index].price)
                        $("#mirror .price").find("sub").html(self[index].give);
                        $("#bigArea").find("img").attr("src",self[index].mirror1);
                        $("#mirror .price").find("span").html(self[index].price);


                        //点击加入购物车
                        $("#btn").on("click",function () {
                            $("#tiao").show()
                            //首先获得cookie，判断是否有这个商品，判断是否有cookie
                            var newArr=$.cookie("myShopcart");
                            if(newArr){//有的话
                                Arr=JSON.parse(newArr);
                                for(var key in Arr){
                                    if(Arr[key].IMG==$("#smallImg").find("img").attr("src")){
                                        Arr[key].Num=parseInt($("#mirror .num").html())+parseInt(Arr[key].Num);
                                        $.cookie("myShopcart", JSON.stringify(Arr), {expires: 7});

                                        return;
                                    }
                                };
                                obj={
                                    IMG:$("#smallImg").find("img").attr("src"),
                                    Num:$("#mirror .num").html()
                                };
                                Arr.push(obj);
                            }else{//没有cookie
                                obj={
                                    IMG:$("#smallImg").find("img").attr("src"),
                                    Num:$("#mirror .num").html()
                                };
                                Arr.push(obj);
                            }
                            $.cookie("myShopcart", JSON.stringify(Arr), {expires: 7});
                            console.log(11);
                        });


                        var objCe=$("myShopcart");
                        var shopNum=0;
                        // if(objCe){
                        //     var objCe=JSON.parse(objCe);
                        //     for(var i in objCe){
                        //         shopSum+=objCe[i].Num;
                        //     }
                        //     //改变侧边栏数据
                        //     $("#aside .aside-l").find("li").find("i").html(shopSum);
                        //
                        //
                        // }




                        $("#btn").siblings("a").on("click",function () {
                            window.location.href="shopcart.html?IMG="+$("#smallImg").find("img").attr("src");
                        });
                        for(var i=index;i<index+5;i++){
                            //创建a标签
                            var  A=$("<a></a>");
                            //创建图片
                            var Img=$("<img>");
                            Img.attr("src",self[i].mirror1);
                            A.append(Img);
                            //创建li标签
                            var Li=$("<li></li>");
                            Li.append(A);
                            Li.on("mouseenter",function () {
                                var href=$(this).find("img").attr("src");
                                $("#smallImg").find("img").attr("src",href);
                                $("#bigImg").attr("src",href);
                            });
                            $("#mirror .least").append(Li);
                        };
                    }
                })
            }
        }
    })



    //点击侧边栏
    var flag=true
    $("#aside .aside-l").find("li").on("click",function () {
        if(flag){
            flag=false;
            $("#aside").stop().animate({right:0},300)
        }else if(flag==false){
            $("#aside").stop().animate({right:-270},300);
            flag=true;
        }
    })
    //点击回退
    $("#aside .aside-r").find("h3").find("span").on("click",function () {
        $("#aside").stop().animate({right:-270},300);
        flag=true;
    })
    //点击删除
    $("#aside .aside-r").find("ul").find("em").on("click",function () {
        $(this).parents("li").remove();
    })
    //移入出来
    $("#aside .aside-l").find("li").on("mouseenter",function () {
        $(this).find("em").stop().animate({opacity:1,left:-80,},300)
    });
    //移出消失
    $("#aside .aside-l").find("li").on("mouseleave",function () {
        $(this).find("em").stop().animate({opacity:0,left:30,},300)
    })
    //点击回到顶部
    $("#aside .aside-l").find("span").on("click",function () {
        $('body,html').animate({scrollTop:0},500);
    })


    var cookieAll=$.cookie("myShopcart")
    if(cookieAll){
        var objShop= JSON.parse(cookieAll);
        //商品放到侧边栏中
        var cal=0;
        var sum2=0
        for(var key4 in objShop){
            var Celi=$("#aside .aside-r ul li").eq(0).clone(true);
            $.ajax({
                url:"../json/detail.json",
                type:"get",
                async:false,
                success:function (res) {
                    for(var key5 in res){
                        if(res[key5].mirror1==objShop[key4].IMG){
                            Celi.children().eq(0).attr("src",res[key5].mirror1)
                            Celi.children().eq(1).html(res[key5].h2)
                            Celi.children().eq(2).html("<span>"+res[key5].price+"<i>"+objShop[key4].Num+"</i></span>");
                            $("#aside .aside-r ul").append(Celi);
                            sum2+=parseInt(objShop[key4].Num)*parseInt(res[key5].price)
                        }
                    }
                }
            });
            cal+=parseInt(objShop[key4].Num);
            //侧边栏中的商品数量
            $("#aside .aside-l").find("li").find("i").html(cal);
            $("#aside .aside-r .cal").find("em").html(cal);
            $("#aside .aside-r .sum").find("em").html(sum2);
        };
    };
    $("#aside .aside-r ul").find("li").eq(0).remove();












})



